<template>
  <div class="function-point-container">
    <div class="header">
      <h2>功能点度量</h2>
      <p>用于计算软件系统的功能点数量</p>
    </div>
    <div class="content">
      <!-- 源代码数据卡片 -->
      <div class="result-section" v-if="sourceCodeData">
        <el-card class="result-card">
          <div slot="header">
            <span>源代码分析结果</span>
          </div>
          <div class="result-content">
            <el-table :data="sourceCodeResultData" style="width: 100%" :default-sort="{prop: 'fileName', order: 'ascending'}">
              <el-table-column prop="fileName" label="文件名" width="200" sortable show-overflow-tooltip></el-table-column>
              <el-table-column label="外部输入x(权重)">
                <template v-slot="{ row }">
                  {{ row.externalInputs }} ×
                  <el-input-number 
                    v-model="row.weights.externalInputs" 
                    :min="1" 
                    :max="10" 
                    size="mini"
                    @change="updateTotals"
                    class="weight-input"
                    :controls="false"
                    @wheel.native.prevent="handleWheel($event, row.weights, 'externalInputs')"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="外部输出x(权重)">
                <template v-slot="{ row }">
                  {{ row.externalOutputs }} ×
                  <el-input-number 
                    v-model="row.weights.externalOutputs" 
                    :min="1" 
                    :max="10" 
                    size="mini"
                    @change="updateTotals"
                    class="weight-input"
                    :controls="false"
                    @wheel.native.prevent="handleWheel($event, row.weights, 'externalOutputs')"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="外部查询x(权重)">
                <template v-slot="{ row }">
                  {{ row.externalQueries }} ×
                  <el-input-number 
                    v-model="row.weights.externalQueries" 
                    :min="1" 
                    :max="10" 
                    size="mini"
                    @change="updateTotals"
                    class="weight-input"
                    :controls="false"
                    @wheel.native.prevent="handleWheel($event, row.weights, 'externalQueries')"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="内部逻辑文件x(权重)">
                <template v-slot="{ row }">
                  {{ row.internalLogicalFiles }} ×
                  <el-input-number 
                    v-model="row.weights.internalLogicalFiles" 
                    :min="1" 
                    :max="10" 
                    size="mini"
                    @change="updateTotals"
                    class="weight-input"
                    :controls="false"
                    @wheel.native.prevent="handleWheel($event, row.weights, 'internalLogicalFiles')"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="外部接口文件x(权重)">
                <template v-slot="{ row }">
                  {{ row.externalInterfaces }} ×
                  <el-input-number 
                    v-model="row.weights.externalInterfaces" 
                    :min="1" 
                    :max="10" 
                    size="mini"
                    @change="updateTotals"
                    class="weight-input"
                    :controls="false"
                    @wheel.native.prevent="handleWheel($event, row.weights, 'externalInterfaces')"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="总计" sortable width="80">
                <template v-slot="{ row }">
                  {{ calculateTotal(row) }}
                </template>
              </el-table-column>
            </el-table>
            <div class="total-points">
              <h3>源代码功能点数：{{ totalPoints }}</h3>
            </div>
            <!-- 添加折线图 -->
            <div class="chart-container">
              <div ref="lineChart" style="width: 100%; height: 400px;"></div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 当没有数据时显示提示 -->
      <div v-if="!sourceCodeData" class="no-data">
        <el-card class="result-card">
          <div class="no-data-content">
            <i class="fas fa-file-upload"></i>
            <h3>暂无数据</h3>
            <p>请先上传源代码文件以进行分析</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'FunctionPointView',
  data() {
    return {
      chart: null,
      totalPoints: 0
    }
  },
  computed: {
    sourceCodeData() {
      return this.$store.getters.getSourceCodeData;
    },
    sourceCodeResultData() {
      if (!this.sourceCodeData || !this.sourceCodeData.topFiles) return [];
      // 为每个文件添加权重属性
      return this.sourceCodeData.topFiles.map(file => ({
        ...file,
        weights: {
          externalInputs: 4,
          externalOutputs: 5,
          externalQueries: 4,
          internalLogicalFiles: 7,
          externalInterfaces: 7
        }
      }));
    }
  },
  methods: {
    calculateTotal(row) {
      return (
        row.externalInputs * row.weights.externalInputs +
        row.externalOutputs * row.weights.externalOutputs +
        row.externalQueries * row.weights.externalQueries +
        row.internalLogicalFiles * row.weights.internalLogicalFiles +
        row.externalInterfaces * row.weights.externalInterfaces
      );
    },
    updateTotals() {
      // 触发重新计算
      this.$forceUpdate();
      // 更新图表
      this.initChart();
      // 更新总功能点数
      this.$nextTick(() => {
        this.totalPoints = this.sourceCodeResultData.reduce((sum, row) => sum + this.calculateTotal(row), 0);
      });
    },
    initChart() {
      if (!this.sourceCodeResultData.length) return;
      
      const chartDom = this.$refs.lineChart;
      this.chart = echarts.init(chartDom);
      
      const fileNames = this.sourceCodeResultData.map(item => item.fileName);
      const series = [
        {
          name: '外部输入',
          type: 'line',
          data: this.sourceCodeResultData.map(item => item.externalInputs * item.weights.externalInputs)
        },
        {
          name: '外部输出',
          type: 'line',
          data: this.sourceCodeResultData.map(item => item.externalOutputs * item.weights.externalOutputs)
        },
        {
          name: '外部查询',
          type: 'line',
          data: this.sourceCodeResultData.map(item => item.externalQueries * item.weights.externalQueries)
        },
        {
          name: '内部逻辑文件',
          type: 'line',
          data: this.sourceCodeResultData.map(item => item.internalLogicalFiles * item.weights.internalLogicalFiles)
        },
        {
          name: '外部接口文件',
          type: 'line',
          data: this.sourceCodeResultData.map(item => item.externalInterfaces * item.weights.externalInterfaces)
        }
      ];

      const option = {
        title: {
          text: '功能点分布趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['外部输入', '外部输出', '外部查询', '内部逻辑文件', '外部接口文件'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: fileNames
        },
        yAxis: {
          type: 'value',
          name: '加权数量'
        },
        series: series
      };

      this.chart.setOption(option);
    },
    handleWheel(event, weights, key) {
      const delta = event.deltaY > 0 ? -1 : 1;
      const newValue = weights[key] + delta;
      if (newValue >= 1 && newValue <= 10) {
        weights[key] = newValue;
        this.updateTotals();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.updateTotals();
    });
  },
  watch: {
    sourceCodeResultData: {
      handler() {
        this.$nextTick(() => {
          this.initChart();
          this.updateTotals();
        });
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
}
</script>

<style scoped>
.function-point-container {
  padding: 20px;
  height: 100%;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.header {
  margin-bottom: 30px;
}

.header h2 {
  color: #333333;
  margin-bottom: 10px;
}

.header p {
  color: #606266;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.result-section {
  margin-top: 20px;
  width: 100%;
}

.result-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  width: 100%;
}

.weight-input {
  width: 40px;
  margin-left: 4px;
}

.weight-input :deep(.el-input__inner) {
  text-align: center;
  padding: 0 ;
}

.total-points {
  margin-top: 20px;
  text-align: right;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.total-points h3 {
  color: #409eff;
  margin: 0;
}

.chart-container {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}

.no-data {
  margin-top: 20px;
}

.no-data-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}

.no-data-content i {
  font-size: 48px;
  color: #909399;
  margin-bottom: 20px;
}

.no-data-content h3 {
  color: #606266;
  margin-bottom: 10px;
  font-size: 18px;
}

.no-data-content p {
  color: #909399;
  font-size: 14px;
}
</style> 